<template>
    <footer class="footer-container">
        <div :class="{'market-item':true,'footer-item':true,'select': currentIndex == 0}" @click.capture="choiceFooter(0, $event)">
            <span class="market-icon"></span>
            <span>市场</span>
        </div>
        <div :class="{'data-item':true,'footer-item':true,'select': currentIndex == 1}" @click.capture="choiceFooter(1, $event)">
            <span class="data-icon"></span>
            <span>数据</span>
        </div>
        <div :class="{'own-item':true,'footer-item':true,'select': currentIndex == 2}" @click.capture="choiceFooter(2, $event)">
            <span class="own-icon"></span>
            <span>我的</span>
        </div>
    </footer>
</template>
<script>
    export default {
        props: ['currentIndex'],
        data () {
            return {
            }
        },
        watch: {
            currentIndex (cur, old) {
                this.currentIndex = cur
            }
        },
        methods: {
            choiceFooter (index, e) {
                switch (index) {
                    case 0 :
                        this.$router.push({path: '/market', query: {id: 0}})
                        break
                    case 1:
                        this.$router.push({path: '/data', query: {id: 1}})
                        break
                    case 2:
                        this.$router.push({path: '/me', query: {id: 2}})
                        break
                }
            }
        },

    }
</script>
<style lang="less">
    .footer-container {
        width: 100%;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 1rem;
        font-size: 0.18rem;
        border-top: 1px solid #ccc;
        background-color: #fff;
        .footer-item {
            flex: 1;
            text-align: center;
            .market-icon {
                display: block;
                margin: 0.15rem auto 0.02rem auto;
                width: 0.42rem;
                height: 0.4rem;
                background: url(../assets/img/market-icon.png) no-repeat;
                background-size: 100%;
            }
            .data-icon {
                display: block;
                margin: 0.15rem auto 0.02rem auto;
                width: 0.44rem;
                height: 0.4rem;
                background: url(../assets/img/data-icon.png) no-repeat;
                background-size: 100%;
            }
            .own-icon {
                display: block;
                margin: 0.15rem auto 0.02rem auto;
                width: 0.34rem;
                height: 0.4rem;
                background: url(../assets/img/own-icon.png) no-repeat;
                background-size: 100%;
            }
        }
        .select {
            color: #29abae;
            .market-icon {
                background: url(../assets/img/market-icon-light.png) no-repeat;
                background-size: 100%;
            }
            .data-icon {
                background: url(../assets/img/data-icon-light.png) no-repeat;
                background-size: 100%;
            }
            .own-icon {
                background: url(../assets/img/own-icon-light.png) no-repeat;
                background-size: 100%;
            }
        }
    }
</style>